<!--
 * @Description: 完成反馈页
 * @Author: Pengfei Zhang
 * @Date: 2021-09-14 11:33:46
 * @LastEditors: Pengfei Zhang
 * @LastEditTime: 2021-09-15 16:54:14
-->
<template>
  <view class="content-base">
    <!-- 无反馈 -->
    <NoData v-if="!taskHasFeedback && !editFeedback"/>

    <!-- 编辑反馈或者任务已有反馈信息 -->
    <view v-if="editFeedback || taskHasFeedback" class="feedback-wrapper">

      <!-- 调度任务 -->
      <view v-if="taskType === 1">
        <view class="support-table-wrapper" v-for="(item,index) in feedbackData.supportList" :key="index">
          <view class="support-item-wrapper">
            <view>{{ item.name }}</view>
            <i class="iconfont icon-dingweiweizhi"/>
          </view>
          <uni-table stripe emptyText="暂无更多数据" class="support-table">
            <!-- 表头行 -->
            <uni-tr>
              <uni-th align="left" width="200rpx">物资名称</uni-th>
              <uni-th align="left">调度要求</uni-th>
              <uni-th align="left" width="100rpx">完成情况</uni-th>
            </uni-tr>
            <!-- 表格数据行 -->
            <uni-tr v-for="i in item.resourceList" :key="i.name">
              <uni-td align="left">{{ i.name }}</uni-td>
              <uni-td align="right" v-if="i.isNum">{{ `${i.requestNum}${i.unit}` }}</uni-td>
              <uni-td align="right" v-if="!i.isNum">{{ `${i.request}` }}</uni-td>
              <uni-td align="right">
                <!-- 数字要求 -->
                <view class="table-input" v-if="i.isNum">
                  <input type="number" v-model="i.achieved" />
                  <cover-image :src="completeImg" mode="aspectFit" class="complete-img" v-if="i.requestNum <= i.achieved"></cover-image>
                  <text class="count" v-if="i.requestNum > i.achieved">{{`-${(i.requestNum - i.achieved)}`}}</text>
                </view>
                <!-- 文本要求 -->
                <view v-if="!i.isNum">
                  <picker @change="(val) => handleSeletorChange(val, i)" :range="completeOption" range-key="label">
                    <view class="uni-input">{{completeOption[i.achieved || 0].label}}</view>
                  </picker>
                </view>
              </uni-td>
            </uni-tr>
          </uni-table>
        </view>
      </view>

      <!-- 集合任务 -->
      <view class="assemble-table-wrapper" v-if="[2,3].includes(taskType)">
        <uni-forms :modelValue="feedbackData" class="form" label-width="90">
          <uni-forms-item label="集合地点">
            {{ feedbackData.assemblePlace}}
          </uni-forms-item>
          <uni-forms-item label="期望时间">
            {{ feedbackData.assembleExpectedTime}}
          </uni-forms-item>
          <uni-forms-item label="集合结果" v-if="feedbackData.assembleResult">
            {{ feedbackData.assembleResult}}
          </uni-forms-item>
        </uni-forms>
        <button 
          class="btn-primary" 
          v-if="!feedbackData.assembleResult"
          @click="handleToSign"
        >签到</button>
      </view>

      <!-- 统计任务 -->
      <view class="count-table-wrapper" v-if="taskType === 4">
        <uni-table stripe emptyText="暂无更多数据" class="count-table">
          <!-- 表头行 -->
          <uni-tr>
            <uni-th align="left" width="200rpx">统计项</uni-th>
            <uni-th align="left">单位/描述</uni-th>
            <uni-th align="left" width="100rpx">情况</uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="i in feedbackData.countList" :key="i.name">
            <uni-td align="left">{{ i.name }}</uni-td>
            <uni-td align="right" v-if="i.isNum">{{ `${i.unit}` }}</uni-td>
            <uni-td align="right" v-if="!i.isNum">{{ `${i.description}` }}</uni-td>
            <uni-td align="right">
              <!-- 统计数字 -->
              <view class="table-input" v-if="i.isNum">
                <input type="number" v-model="i.result" />
                <!-- <cover-image :src="completeImg" mode="aspectFit" class="complete-img" v-if="i.requestNum <= i.achieved"></cover-image>
                <text class="count" v-if="i.requestNum > i.achieved">{{`-${(i.requestNum - i.achieved)}`}}</text> -->
              </view>
              <!-- 统计情况 -->
              <view v-if="!i.isNum">
                <picker @change="(val) => handleCountSeletorChange(val, i)" :range="resultOption" range-key="label">
                  <view class="uni-input">{{resultOption[i.result || 0].label}}</view>
                </picker>
              </view>
            </uni-td>
          </uni-tr>
        </uni-table>
      </view>

      <!-- 所有类型任务共用 -->
      <view class="feedback-content">
        <view class="content-text">
          <view class="text-title">任务反馈</view>
          <textarea 
            placeholder="请填写反馈内容" 
            style="width: 100%;" 
            v-model="feedbackData.feedback"
            class="text-textarea"
          />
        </view>
        <view class="content-img">
          <uni-file-picker 
            v-model="imageValue"  
            file-mediatype="image"
            mode="grid"
            file-extname="png,jpg"
            :limit="9"
          >
            <view class="upload-button">
              <cover-image :src="photoImg" mode="aspectFit" class="upload-image"/>
              <text class="upload-text">上传图片</text>
            </view>
          </uni-file-picker>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import NoData from './no-data.vue';
import completeImg from '@/static/images/resource-finish.png'
import photoImg from '@/static/images/photo.png'

export default {
  components:{
    NoData,
  },
  props:{
    editFeedback:{
      type: Boolean,
      default: false,
    },
    taskHasFeedback:{
      type:Boolean,
      default:false,
    },
    taskType:{
      type:Number,
      default:3, // 0：普通任务 1:资源调度 2：前往集合 3：组织集合 4：统计任务
    }
  },
  data(){
    return {
      feedbackData: {
        supportList:[
          {
            name:'深圳市南山区环城路虾粥村',
            resourceList:[
              {
                name:'物资名称（规格说明）',
                isNum:true,
                requestNum:2,
                unit:'台',
                achieved:'',

              },{
                name:'队伍名称',
                isNum:true,
                requestNum:4,
                unit:'人',
                achieved:'',
              },{
                name:'专家姓名',
                isNum:false,
                request:'调用应急专家',
                unit:'人',
                achieved:'',
              }
            ]
          }
        ],
        countList:[
          {
            name:'伤亡情况',
            isNum:true,
            unit:'人',
            description:'',
            result:'',
          },{
            name:'报废车辆',
            isNum:true,
            unit:'台',
            description:'',
            result:'',
          },{
            name:'xxx情况',
            isNum:false,
            unit:'', 
            description:'发生煤气泄漏',
            result:'',
          }
        ],
        feedback:'',
        assemblePlace:'深圳市南山区环城路虾粥村',
        assembleExpectedTime:'2021/12/12 12:12:12',
        assembleResult:''
      },
      imageValue:[{
        url:'https://img2.baidu.com/it/u=1678948314,1083480950&fm=26&fmt=auto&gp=0.jpg'
      }],
      completeImg:completeImg,
      photoImg:photoImg,
      completeOption:[{
        label:'完成',
        value:0
      },{
        label:'未完成',
        value:1
      }],
      resultOption:[
        {
          label:'存在',
          value:0,
        },{
          label:'不存在',
          value:1,
        }
      ]
    }
  },
  methods:{
    handleToSign(){
      console.log(1)
      uni.navigateTo({
        url: '/pages/mapSign/index',
      })
    },
    handleSeletorChange(val, i) {
      i.achieved = this.completeOption[val.detail.value].value
    },
    handleCountSeletorChange(val, i) {
      i.result = this.resultOption[val.detail.value].value
    }
  }
}
</script>

<style lang="scss" scoped>
.content-base {
  padding: 0 32rpx;

  .assemble-table-wrapper{
    .form {
      /deep/ .uni-forms-item__content {
        line-height: 40rpx;
        padding: 16rpx 0;
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 28rpx;
        line-height: 42rpx;
        text-align: left;
        color: #1d1f24;
      }

      /deep/ .uni-forms-item__label{
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 28rpx;
        line-height: 48rpx;
        text-align: left;
        color: #555;
        opacity: 0.8;
      }

      .uni-forms-item:last-child{
        border-bottom: 1px solid #eee;
        margin-bottom:24rpx;
      }
    }

    .btn-primary {
      width: 208rpx;
      height: 88rpx;
      border-radius: 8rpx;
      background: linear-gradient(#3294ff 0%, #027aff 100%);
    }
  }

  .support-table-wrapper{
    font-family: "Source Han Sans CN";
    font-weight: normal;
    font-size: 28rpx;
    line-height: 40rpx;
    text-align: left;
    color: #1d1f24;
    padding-top:28rpx;

    .support-table{
      border: 1rpx solid #eff2f5;
    }

    .table-input{
      display:flex;
      align-items: center;
      justify-content: space-between;
      width:160rpx;
      height:48rpx;
      border-radius: 6rpx;
      border: 1rpx solid #e6e8eb;
      text-align:left;

      /deep/ uni-input{
        width:80rpx;
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 26rpx !important;
        color: #2b2b2b;
        margin-right:10rpx;
      }

      .count{
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 26rpx;
        text-align: right;
        color: #ff5151;
      }

      .complete-img{
        width: 20rpx;
        height: 20rpx;
      }
    }

    .support-item-wrapper{
      display: flex;
      justify-content: space-between;
      margin-bottom:35rpx;

      .people-wrapper{
        .normal--blue-text{
          font-family: "Source Han Sans CN";
          font-weight: normal;
          font-size: 28rpx;
          line-height: 40rpx;
          color: #027aff;
          margin-right:20rpx;
        }
      }

      .icon-dingweiweizhi{
        color:#FF5151;
      }

      .icon-hujiao{
        color:#027AFF;
      }
    }
  }

  .count-table-wrapper{
    font-family: "Source Han Sans CN";
    font-weight: normal;
    font-size: 28rpx;
    line-height: 40rpx;
    text-align: left;
    color: #1d1f24;
    padding-top:28rpx;

    .table-input{
      display:flex;
      align-items: center;
      width:180rpx;
      height:48rpx;
      border-radius: 6rpx;
      border: 1rpx solid #e6e8eb;
      text-align:left;

      /deep/ uni-input{
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 26rpx !important;
        color: #2b2b2b;
      }
    }
  }

  .feedback-content{
    margin-top:40rpx;

    .content-text{
      border-bottom:1px solid #EFF2F5;
      margin-bottom:30rpx;

      .text-title{
        font-family: "Source Han Sans CN Medium";
        font-weight: 500;
        font-size: 32rpx;
        line-height: 50rpx;
        text-align: left;
        color: #2b2b2b;
        margin-bottom:20rpx;
      }

      .text-textarea{
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 28rpx;
        line-height: 48rpx;
        text-align: left;
        color: #2b2b2b;
      }
    }

    .upload-button{
      display: flex;
      flex-direction: column;
      align-items:center;
      justify-content: center;

      .upload-image{
        width: 45rpx;
        height: 37.5rpx;
      }

      .upload-text{
        font-family: "Source Han Sans CN";
        font-weight: normal;
        font-size: 24rpx;
        line-height: 48rpx;
        text-align: center;
        color: #2b2b2b;
        opacity: 0.4;
      }
    }
  }
}
</style>